<template>
    <div id="nav">
        <el-popover
            class="s-icon"
            placement="bottom"
            width="100"
            trigger="click"
        >
            <span style="float: left">简易模式</span>
            <el-switch
                v-model="switchValue"
                class="switchStyle"
                active-color="#13ce66"
                active-value="simple"
                inactive-value="normal"
                active-text="开"
                inactive-text="关"
                style="float: right"
                :change="switchChange()"
            />

            <el-table v-loading="loading" :data="userList" size="mini" max-height="200">
                <el-table-column align="left" width="70" property="name" label="" />
                <el-table-column align="right" width="80" property="replaceText" label="" >
                    <template slot-scope="scope">
                        <el-button round
                                   size="mini"
                                   slot="reference"
                                   @click="changeUser(scope.row.id)"
                                   :disabled="scope.row.disabled"
                        >
                            {{scope.row.replaceText}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-button
                slot="reference"
                size="mini"
                icon="el-icon-setting"
                @click="makeSwitchValue"
                circle
            />
        </el-popover>
        <h3>
            <router-link :to="{name:'webFile'}" exact>URL在线文档预览</router-link>
            &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
            <router-link :to="{name:'dbFile'}" exact>数据库文档预览</router-link>
        </h3>
        <router-view/>
    </div>
</template>

<script>
import {getUserList} from '../api/index'
import {defaultUserId, simpleModeKey, userIdKey} from "@/constant";

export default {
    name: "index",
    data() {
        return {
            loading: false,
            switchValue: "F",
            changeUserList: [],
            userList: [],
        }
    },
    methods: {
        getUserList(userId){
            this.loading = true;
            getUserList().then(res=>{
                if (res.data.data){
                    this.userList = res.data.data;
                    this.changeUserList = res.data.data;
                    for (let i = 0; i < this.userList.length; i++) {
                        if (userId === this.userList[i].id){
                            this.userList[i].replaceText = '当前';
                            this.userList[i].disabled = true
                        }else {
                            this.userList[i].replaceText = '切换';
                            this.userList[i].disabled = false
                        }
                    }
                }else {
                    this.showErrMeg('请求错误！');
                }
            }).catch(()=>{
                this.showErrMeg('请求错误！');
            });
            this.loading = false;
        },
        switchReplaceText(){
            let userId = localStorage.getItem(userIdKey);
            if (!userId){
                userId = defaultUserId;
            }
            this.getUserList(userId);
        },
        changeUser(userId){
            localStorage.setItem(userIdKey,userId);
            this.switchReplaceText();
        },
        switchChange(){
            localStorage.setItem(simpleModeKey,this.switchValue);
        },
        makeSwitchValue(){
            this.switchReplaceText();
            this.switchValue = localStorage.getItem(simpleModeKey);
        }
    },
    // 初始化
    created() {
        this.makeSwitchValue();
    }
}
</script>

<style scoped>
#nav {
    height: auto;
    padding-top: 2%;
    width: calc(100% - 200px);
    margin-left: 6%;
    text-align: center;
}

#nav .s-icon{
    float: right;
    z-index: 999;
    margin-left: -28px;
}

#nav a {
    font-weight: bold;
    color: #2c3e50;
    z-index: 1;
}

#nav a.router-link-exact-active {
    color: #42b983;
}
</style>
<style>
.switchStyle .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
}
.switchStyle .el-switch__label--left {
    z-index: 9;
    left: 22px;
}
.switchStyle .el-switch__label--right {
    z-index: 9;
}
.switchStyle .el-switch__label.is-active {
    display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
    width: 50px !important;
}
</style>
